import { ref, computed, onMounted, onUnmounted } from "vue";
// nanoid 是一款用于生成唯一id的第三方插件
import { nanoid} from "nanoid"

//dayjs是一款操作日期时间的模块,另一个比较火的是momentjs
import dayjs from "dayjs"

//当前代码没有问题，当前项目配置了一些选项，让我们分开引用,TypeScript 3.8版本提供的import type关键字,专门用于引用类型
// import { getBannerList,IBanner } from '@/api/home'
import { getBannerList, getProductList } from '@/api/home'

import { type IBanner, type IProduct,getSeckillList } from "@/api/home";



export function useBanner() {
    const bannerList = ref<IBanner[]>([]);

    onMounted(async () => {
        const response = await getBannerList()
        bannerList.value = response.data;
    })

    return {
        bannerList,
    };
}

//图片懒加载处理
export function useProduct() {
    const loading = ref(false)
    const page = ref(1);//当前页码
    const pageSize = ref(10);//每页显示的数据条数
    const pageTotal= ref(5);//总的页数
    const productList = ref<IProduct[]>([]);

    // 表示是否完结,如果为true则表示没有下一页了
    const isFinished = computed(()=>{
        return page.value > pageTotal.value;
    })

    // 请求数据
    const fetchData = async () => {
        try {
            // 判断是否还有下一页
            if(isFinished.value){
                // console.log("到底啦")
                return;
            }
            // loading 设置为true 表示接口调用中
            loading.value = true;
            const response = await getProductList(page.value, pageSize.value);
            //   console.log(response)
            // productList.value = response.data;
            // 使用数据追加的操作
            productList.value.push(...response.data);

        } finally  {
            // 不管上面的代码请求成功还是失败，loading都设置为false
            loading.value = false;
        }
    }

    // 滚动条事件回调函数
    const handleScroll = () => {
        // console.log("handleScroll")
        //判断滚动条是否滚动到底部  文档高度 - 可视区域高度 = 最大滚动距离
        const clientHeight = document.documentElement.clientHeight; //可视区域高度
        const scrollHeight = document.body.scrollHeight; //文档高度
        const maxScrollTop = scrollHeight - clientHeight - 50; //最大滚动距离 这里会有一定误差,导致触发不了,所以再减掉50左右，方便后面的比较计算
        const scrollTop = document.documentElement.scrollTop; // 滚动条距离顶部的距离

        // 滚动到底了且没有在请求数据
        if (scrollTop >= maxScrollTop && !loading.value) {
            // 调用接口获取下一页的数据
            page.value++;
            fetchData();
        }
    }

    onMounted(async () => {
        fetchData(); //默认请求一次数据

        window.addEventListener("scroll", handleScroll);
    });

    onUnmounted(() => {
        // 移除事件
        window.removeEventListener("scroll", handleScroll);
    });

    return {
        page,
        pageSize,
        productList,
        isFinished,
    }
}

export function useGridList(){
    const gridList = [
        {
          id: nanoid(),
          text: '京东超市',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '数码电器',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东新百货',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东生鲜',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东到家',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东超市',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '数码电器',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东新百货',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东生鲜',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg',
        },
        {
          id: nanoid(),
          text: '京东到家',
          url:
            'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg',
        },
      ];

      return {
        gridList
      };
}

export function useSeckill(){
  const seckillList = ref<IProduct[]>([]);
  
  // 秒杀倒计时,是一个毫秒单位数据,这个数据的值应该也是接口返回的
  const time = ref(1000*100); //ms

  // 秒杀功能是否显示
  const isShow = ref(true);

  const fetchData = async ()=>{
    const response = await getSeckillList();
    seckillList.value = response.data;
    time.value=3600*1000; //后端接口返回的数据可能不会是一个倒计时的毫秒数,而是给你一个倒计时的日期,比如 2023-02-09 00:00:00 这时就需要自己计算
    // let endDate = "2023-02-09 00:00:00";
    // console.log(dayjs(endDate).diff(dayjs()));
    // time.value=dayjs(endDate).diff(dayjs())
  };

  const handleFinish = ()=>{
    // console.log('处理倒计时完成')
    isShow.value = false;
  };

  onMounted(() => {
    fetchData();
  })

  return {
    seckillList,
    time,
    handleFinish,
    isShow,
  }
}